<template>
  <div class="demo-title">image/demo4</div>
  <div class="demo">
    <div class="demo-item">
      <Image src="https://error.png" width="100px" height="100px" show-error />
      <p class="demo-item-text">默认</p>
    </div>
    <div class="demo-item">
      <Image src="https://error.png" width="100px" height="100px" show-error custom-error>
        <template #error>
          <div class="custom-error-tip">自定义加载失败</div>
        </template>
      </Image>
      <p class="demo-item-text">自定义</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import Image from '@sscd-mobile/image'
</script>
<style lang="less" scoped>
  .demo {
    padding: 12px;
    background: #fff;
    display: flex;
    > .demo-item {
      width: 100px;
      height: 130px;
      margin-right: 12px;
      > .demo-item-text {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    }
    .custom-error-tip {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>